<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@include file="/common/definition.jsp"%>

<html:html>
<tiles:insert beanName="admin-definition" flush="true">
	<tiles:put name="title"> Administrator Management </tiles:put>
	<tiles:put name="body" type="string">
	<div class="mainHome col-md-12" style="padding: 25px; min-height: 360px">
		<div class="row">
			<div class="col-md-3">
				<div class="muted h3" style="padding-bottom: 15px;">Danh Mục</div>
				<div class="dropdown clearfix">
					<ul class="dropdown-menu"
						style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
						<s:if test="productModel.listSubcat != null">
							<s:iterator value="productModel.listSubcat" id="list">
								<li class="dropdown-submenu"><a><s:property
											value="mainCatName" /> </a>
									<ul>
										<s:iterator value="listinfo" id="list1">
											<li><s:a action="viewCategories">
													<s:property value="catName" />
													<s:param name="catID" value="catID"></s:param>
												</s:a></li>
										</s:iterator>
									</ul>
								</li>
							</s:iterator>
						</s:if>
						<s:else>
							<s:iterator value="listSubcat" id="list">
								<li class="dropdown-submenu"><a><s:property
											value="catName" /> </a>
									<ul>
										<s:iterator value="listinfo" id="list1">
											<li><s:a action="viewCategories">
													<s:property value="catName" />
													<s:param name="catID" value="catID"></s:param>
												</s:a></li>
										</s:iterator>
									</ul></li>
							</s:iterator>
						</s:else>
					</ul>
				</div>
			</div>
			<div class="col-md-5">
				<p class="muted h3" style="padding-bottom: 10px;">Thêm Danh Mục</p>
				<div class="col-sm-12" style="padding: 0px;">
					<div class="error_box"></div>
				</div>
				<s:form name="addCategory" action="addCategories" theme="simple" cssClass="form">
					<s:if test="errorAddCat == null || errorAddCat == ''">
					</s:if>
					<s:elseif test="errorAddCat == 'Thêm danh mục thành công'">
						<div class="success_box" style="display: block;"><s:property value="errorAddCat"/></div>
					</s:elseif>
					<s:elseif test="errorAddCat != null">
						<div class="error_box" style="display: block;"><s:property value="errorAddCat"/></div>
					</s:elseif>
					<div class="form-group">
						<label><strong>Tên Danh Mục:</strong> </label>
						<s:textfield name="categories.catName" cssClass="form-control"
							data-toggle="tooltip" 
							title="Danh mục có độ dài tối đa 20 ký tự"></s:textfield>
					</div>
					<div class="form-group">
						<label><strong>Danh Mục:</strong> </label> <select
							name="categories.mainCatID" id="subOf" class="form-control" tabindex="0">
							<option value="0">Main Categories</option>
								<s:iterator value="productModel.listMainCategories">
									<option value='<s:property value="mainCatID"/>'>
										<s:property value="mainCatName"/>
									</option>
								</s:iterator>
						</select>
					</div>
					<button Class="btn btn-primary">Thêm</button>
					<button type="reset" class="btn btn-default">Nhập Lại</button>
				</s:form>
				<script type="text/javascript">
				var validator = new FormValidator('addCategory', 
				[{
					name: 'categories.catName',  
					display: 'tên danh mục',
					rules: 'required|min_length[1]|max_length[20]'
				}], function(errors, evt) {
							var SELECTOR_ERRORS = $('.error_box'),
							SELECTOR_SUCCESS = $('.success_box');
							
						if (errors.length > 0) {
							SELECTOR_ERRORS.empty();
							for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
								SELECTOR_ERRORS.append(errors[i].message + '<br />');
							}
							
							SELECTOR_SUCCESS.css({ display: 'none' });
							SELECTOR_ERRORS.fadeIn(200);
						} else {
							SELECTOR_ERRORS.css({ display: 'none' });
							SELECTOR_SUCCESS.fadeIn(200);
						}			
					});
				</script>
			</div>
		</div>
	</div>
	</tiles:put>
</tiles:insert>
</html:html>

<script type="text/javascript">
	function switchAction(formId, action) {
		$('#' + formId).attr('action', action);
		$.post(action);
	}
</script>
